<template>
 <!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/ContractHshow">货主合同管理</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>货主信息列表</el-breadcrumb-item>
  </el-breadcrumb>
</div>
    <el-form :inline="true" :model="from" class="demo-form-inline">
    <el-form-item label="合同标题">
      <el-input v-model="from.contractTitle" placeholder="请输入合同标题" clearable />
    </el-form-item>
    <el-form-item label="货主单位">
      <el-input v-model="from.unit" placeholder="对方单位" clearable />
    </el-form-item>
    <el-form-item label="货主负责人">
      <el-input v-model="from.personCharge" placeholder="对方负责人" clearable />
    </el-form-item>
    <el-form-item label="经办人">
      <el-input v-model="from.attn" placeholder="经办人" clearable />
    </el-form-item>
    <el-form-item label="签订日期">
        <el-date-picker
        v-model="from.dateofSigning"
        type="date"
        placeholder="签订日期" value-format="YYYY-MM-DD"
        clearable
      />
    </el-form-item>
    <el-form-item label="审批状态" style="width: 300px;">
        <el-select
        v-model="from.ccontractStatus"
        placeholder="审批状态"
        clearable
      >
        <el-option label="待提交" :value="1" />
        <el-option label="待审批" :value="2" />
        <el-option label="已通过" :value="3" />
        <el-option label="已拒绝" :value="4" />
      </el-select>
    </el-form-item>
    <el-button size="small" type="primary" @click="show" >查询</el-button>
    <el-button size="small" type="primary"  @click="Add()">新增</el-button>
    <el-button size="small" type="primary" @click="Dels()"  >批量删除</el-button>
    <el-button size="small" type="primary" @click="chong()">重置</el-button>
    </el-form>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection"  width="55" />
    <el-table-column prop="contractNumber" label="合同编号" width="100" />
    <el-table-column prop="contractTitle" label="合同标题" width="100" />
    <el-table-column prop="unit" label="货主单位" width="100" />
    <el-table-column prop="personCharge" label="货主负责人" width="100" />
    <el-table-column prop="lineName" label="线路" width="100" />
    <el-table-column prop="tonPrice" label="吨运价" width="100" />
    <el-table-column prop="ton" label="包车条件吨位" width="100" />
    <el-table-column prop="charteredBusPrice" label="包车金额" width="100" />
 <el-table-column prop="dateofSigning" label="签订日期" width="100" >
  <template #default="scope">
            {{ scope.row.dateofSigning.substring(0, 10)}}
   </template>
 </el-table-column>
    <el-table-column prop="attn" label="经办人" width="100" />
    <el-table-column prop="createdDate" label="创建时间" width="100" >
      <template #default="scope">
        {{ scope.row.createdDate.substring(0, 10)}}
      </template>
    </el-table-column>
    <el-table-column prop="ccontractStatus" label="状态" width="100" >
        <template #default="scope">
            <el-tag type="success" v-if="scope.row.ccontractStatus == 1">待提交</el-tag>
            <el-tag type="success" v-if="scope.row.ccontractStatus == 2">待审批</el-tag>
            <el-tag type="success" v-if="scope.row.ccontractStatus == 3">已通过</el-tag>
            <el-tag type="success" v-if="scope.row.ccontractStatus == 4">已拒绝</el-tag>
          
        </template>
 </el-table-column>
    <el-table-column prop="approver" label="审批人" width="100" />
    <el-table-column  label="操作" width="500" >
    <template #default="scope">
          <el-button size="small" @click="Update(scope.row.contractId)" v-if="scope.row.ccontractStatus != 2" >编辑</el-button>
          <el-button size="small" type="danger" @click="Del()" >删除</el-button>
          <el-button size="small" type="primary" @click="look(scope.row.contractId)" >查看</el-button>
          <el-button size="small" type="success" v-if="scope.row.ccontractStatus == 1" @click="Shen(scope.row.contractId)"  >提交审批</el-button>
          <el-button size="small" type="warning" v-if="scope.row.ccontractStatus == 4">重新提交</el-button>
          </template>
      </el-table-column>
 </el-table>
  <el-pagination
      v-model:current-page="page.Pageindex"
      v-model:page-size="page.Pagesize"
      :page-sizes="[3, 6, 9, 11]"
       layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="1300"
   
  >
    <span>
     <table>
      <thead>
        <tr>
          <th>合同编号</th>
          <th>合同标题</th>
          <th>货主单位</th>
          <th>货主负责人</th>
          <th>线路</th>
          <th>吨运价</th>
          <th>包车条件吨位</th>
          <th>包车金额</th>
          <th>签订日期</th>
          <th>经办人</th>
          <th>创建时间</th>
          <th>状态</th>
          <th>审批人</th>
        </tr>
  </thead>
  <tbody>
    <tr>
    <td>{{backfill.contractNumber}}</td>
      <td>{{backfill.contractTitle}}</td>
      <td>{{backfill.unit}}</td>
      <td>{{backfill.personCharge}}</td>
      <td>{{backfill.lineName}}</td>
      <td>{{backfill.tonPrice}}</td>
      <td>{{backfill.ton}}</td>
      <td>{{backfill.charteredBusPrice}}</td>
      <td>{{backfill.dateofSigning}}</td>
      <td>{{backfill.attn}}</td>
      <td>{{backfill.createdDate}}</td>
      <td>
        <el-tag v-if="backfill.ccontractStatus === 1" type="success">待提交</el-tag>
        <el-tag v-if="backfill.ccontractStatus === 2" type="success">待审批</el-tag>
        <el-tag v-if="backfill.ccontractStatus === 3" type="success">已通过</el-tag>
        <el-tag v-if="backfill.ccontractStatus === 4" type="success">已拒绝</el-tag>
      </td>
      <td>{{backfill.approver}}</td>
      
   
    </tr>
  </tbody>
 
     </table>
  


    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
       
      </div>
    </template>
  </el-dialog>
</template>
   <script setup lang='ts'>
    import axios  from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize } from 'element-plus'
    import { ref, reactive, onMounted,watch } from 'vue';
    import { useRoute } from 'vue-router'; 
    const route = useRoute()  
    const dialogVisible = ref(false) 
    const tableData = ref([]);  
    onMounted(() => {
       show()
       getRoleMenuFun()
        })
     //查询条件
    const from=reactive({
            contractTitle:'',
            unit:'',
            personCharge:'',
            attn:'',
            dateofSigning:'',
            ccontractStatus:'',
            buttonArray:[]
 })
 
//根据菜单id查询按钮功能权限
const getRoleMenuFun=()=>{
  axios.get('http://47.96.109.219:5202/api/RoleMenuFun/RoleMenuFunId', {
    params: {
      menuId:route.query.id
    }
  }).then(res=>{
    console.log(res);
    from.buttonArray=res.data.data
  }).catch(err=>{
    console.log(err);
    
  })    
}
const chong=()=>{
  from.contractTitle=''
  from.unit=''
  from.personCharge=''
  from.attn=''
  from.dateofSigning=''
  from.ccontractStatus=''
  window.location.reload()
}
const multipleSelection = ref([])
 //多选用于批删
 const handleSelectionChange = (val:any) => {
  multipleSelection.value=(val.map(o=>o.contractId))

}
//删除
const Del=()=>{
  console.log(multipleSelection.value)
  ElMessageBox.confirm(
    '您确定要删除吗？',
    'Warning',
    {
      confirmButtonText: '是的',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post('/hwrite/api/Contract/DelContract',{
        contractId:multipleSelection.value
      }  )
.then(res=>{
   if(res.data.data==1){
      ElMessage.success('删除成功')
      show();
   
    }
})
    })
}
//删除
const Dels=()=>{
  if (multipleSelection.value.length == 0) { 
        ElMessage.error('请选择要删除的数据')
        return
    }
  console.log(multipleSelection.value)
  ElMessageBox.confirm(
    '您确定要删除吗？',
    'Warning',
    {
      confirmButtonText: '是的',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post('/hwrite/api/Contract/DelContract',
        {
          ContractId:multipleSelection.value
        }
      )
.then(res=>{
   if(res.data.data==1){
      ElMessage.success('删除成功')
      show();
   
    }
})
    })
}
 const page=reactive({
    Pageindex:1,
    Pagesize:2,
    totalCount:0,
    PageCount:0

   })
const show=()=>{
    axios.get('/hread/api/ContractRead/HShowContract',
            {
                params: {
                    Pageindex:page.Pageindex,
                    Pagesize:page.Pagesize,
                    ContractTitle:from.contractTitle,
                    Unit:from.unit,
                    PersonCharge:from.personCharge,
                    Attn:from.attn,
                    DateofSigning:from.dateofSigning,
                    CcontractStatus:from.ccontractStatus
   }
   }
        )
        .then(res => {
     tableData.value = res.data.data.list;
      page.totalCount=res.data.data.totalCount;
         page.PageCount=res.data.data.pageCount;
        
          
        })

}
//修改
const Update=(ContractId:number)=>{
  
   router.push({
      path:'/ContractHupdate',
      query:{ContractId:ContractId}

   })
}
import { useRouter } from 'vue-router';
const router=useRouter()
//添加
const Add=()=>{
   router.push('/ContractHAdd')
}
//分页
const handleSizeChange = (val:any) => {
    page.Pagesize=val;
    show();
  }
  const handleCurrentChange = (val:any) => {
    page.Pageindex=val;
    show();
  } 
  const backfill=ref({})
const look =(ContractId:number)=>{
  dialogVisible.value=true
  axios.get('/hread/api/ContractRead/BackfillTshowContract', {
        params: {
          ContractId: ContractId
        }
      }).then(res => {
      backfill.value=res.data.data
      console.log(backfill)
       
    })
    
  //      router.push({
  //    path:'/ContractTBackfill',
  //    query:{ContractId:ContractId}
  //  })
}
//修改状态
const Shen=(contractId:number)=>{
    axios.post('/hwrite/api/Contract/UpdateTStateContract',{
      ContractId:contractId,
    }).then(res=>{
      if(res.data.data>0){
        ElMessage({
          message: '成功',
          type: 'success',
        })
        show()
      }
    })

}


</script>
    
<style>
    
</style>